<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>系统管理</el-breadcrumb-item>
      <el-breadcrumb-item>系统回收站</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="block" v-for="item in recycleList" style="width: 40%">
      <el-timeline v-if="item.type==='type'">
        <el-timeline-item :timestamp="item.delTime" placement="top" icon="el-icon-user-solid" size="large"
                          color="green">
          <el-card>
            <h3>删除了一个&nbsp;&nbsp;&nbsp;管理员
              :&nbsp;&nbsp;&nbsp;{{ item.name }}</h3>
            <p><strong>超级管理员</strong> &nbsp;&nbsp;&nbsp;&nbsp;提交于 &nbsp;&nbsp;&nbsp;<strong>{{ item.delTime }}</strong>
            </p>
            <div @click="doRecycle(item)"><h3 style="position: relative;left:85%;color: #67C23A">恢复<i
                class="el-icon-success" style="font-size: larger;color: #67C23A"></i></h3></div>
          </el-card>
        </el-timeline-item>
      </el-timeline>
      <el-timeline v-if="item.type==='role'">
        <el-timeline-item :timestamp="item.delTime" placement="top" icon="el-icon-loading" size="large" color="blue">
          <el-card>
            <h3>删除了一个&nbsp;&nbsp;&nbsp;角色
              : &nbsp; &nbsp; &nbsp;{{ item.name }}</h3>
            <p><strong>超级管理员</strong> &nbsp;&nbsp;&nbsp;&nbsp;提交于 &nbsp;&nbsp;&nbsp;<strong>{{ item.delTime }}</strong>
            </p>
            <div @click="doRecycle(item)"><h3 style="position: relative;left:85%;color: #67C23A">恢复<i
                class="el-icon-success" style="font-size: larger;color: #67C23A"></i></h3></div>
          </el-card>
        </el-timeline-item>
      </el-timeline>
      <el-timeline v-if="item.type==='permission'">
        <el-timeline-item :timestamp="item.delTime" placement="top" icon="el-icon-loading" size="large" color="blue">
          <el-card>
            <h3>删除了一个&nbsp;&nbsp;&nbsp;权限
              : &nbsp; &nbsp; &nbsp;{{ item.name }}</h3>
            <p><strong>超级管理员</strong> &nbsp;&nbsp;&nbsp;&nbsp;提交于 &nbsp;&nbsp;&nbsp;<strong>{{ item.delTime }}</strong>
            </p>
            <div @click="doRecycle(item)"><h3 style="position: relative;left:85%;color: #67C23A">恢复<i
                class="el-icon-success" style="font-size: larger;color: #67C23A"></i></h3></div>
          </el-card>
        </el-timeline-item>
      </el-timeline>


    </div>

  </div>
</template>
<script>

export default {
  data() {
    return {
      recycleList: [], //待回收的系统信息
    };
  },
  methods: {
    //初始化查询 所有已删除数据
    initRecycle() {
      let url = "/role/showAllRecycle";
      this.$axios.get(url).then(res => {
        if (res.data.code === 200) {
          this.recycleList = res.data.data;
        } else {
          this.$message({
            type: 'error',
            message: res.data.msg,
            duration: 1000
          })
        }
      })
    },
    doRecycle(item) {
      let url = "/role/doRecycle";
      let formData = new FormData();
      formData.append("id", item.id);
      formData.append("type", item.type);
      this.$axios.post(url, formData).then(res => {
        if (res.data.code === 200) {
          this.$message({
            type: 'success',
            message: res.data.msg,
            duration: 1000
          })
          this.initRecycle();
        } else {
          this.$message({
            type: 'error',
            message: res.data.msg,
            duration: 1000
          })
        }
      })
    },
    message(res) {
      if (res.data.code === 200) {
        this.$message({
          type: 'success',
          message: res.data.msg,
          duration: 1000
        });
        this.initRecycle();
      } else {
        this.$message({
          type: 'error',
          message: res.data.msg,
          duration: 1000
        })
      }
    }
  },
  created() {
    this.initRecycle();
  }
};
</script>
<style lang="less" scoped>
</style>